<template>
  <div class="app-container">
    <el-container style="border: 1px solid #eee">
      <el-header class="el-header" style="height: 60px;">
        <div style="margin-top: 15px;">
          <el-input v-model="query" placeholder="输入关键词进行搜索" class="input-with-select" @keyup.enter.native="onSubmit">
            <el-select slot="prepend" v-model="select" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="(item, index) in selecttabs"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
          </el-input>
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick">
          <el-tab-pane
            v-for="(tab,index) in tabNames"
            :key="index"
            v-loading="loading"
            :label="tab.label"
            :name="tab.name"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a :href="localSearch" target="_blank">在{{ activeName }}上搜索</a></span>
                </button>
                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a :href="'https://www.semrush.com/info/'+query" target="_blank">semrush</a></span>
                </button>

                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a
                    :href="' https://baike.baidu.com/search/none?&pn=0&rn=10&enc=utf8word='+query"
                    target="_blank"
                  >百度百科</a></span>
                </button>

                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a :href="'https://en.wikipedia.org/w/index.php?search='+query" target="_blank">wiki</a></span>
                </button>
                <el-button style="float: right; padding: 3px 0" type="text" @click="GetPrevPage">上一页</el-button>
                <el-button style="float: right; padding: 3px 0" type="text" @click="GetNextPage">下一页</el-button>
              </div>
              <div
                v-for="item in searchDatas"
                class="text item"
                style="margin-right: 5px;
    font-size: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 3px 5px 3px 0px;
    margin-left: 0px;"
              >
                <div style="display: inline-block;">
                  <span style="margin-right: 10px;display: block;">
                    <img :src="item.image" style="height: 100px;width:100px"></span>
                </div>
                <div style="padding-left: 10px;display: inline-block;">
                  <p class="title" v-html="item.title" />
                  <p class="desc" v-html="item.content" />
                  <span class="a"><a :href="item.url" target="_blank">{{ item.url }}</a></span>
                  <span v-if="currentTab.type===3">
                    <el-button type="text" size="small" @click="ShowSimilarweb(item.url)">similarweb</el-button></span>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>

      </el-main>
      <el-dialog
        title="similarweb流量"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <iframe :src="sdomin1" frameborder="0" width="100%" height="200" style="border: solid 1px #D7D7D7;" />
        <iframe :src="sdomin2" frameborder="0" width="100%" height="200" style="border: solid 1px #D7D7D7;" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<style scoped>
  .app-container >>> .el-select .el-input {
    width: 130px;
  }

  .app-container >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .app-container >>> .text {
    font-size: 14px;
  }

  .app-container >>> .text p.title {
    font-weight: bold;
    font-weight: 600;
  }

  .app-container >>> .text p.desc {
    font-size: 10px;
  }

  .app-container >>> .text em {
    color: red;
  }

  .app-container >>> .text span.a {
    color: #3A7734;
  }

  .app-container >>> .item {
    margin-bottom: 1px;
  }

  .app-container >>> .clearfix:before,
  .app-container >>> .clearfix:after {
    display: table;
    content: "";
  }

  .app-container >>> .clearfix:after {
    clear: both
  }
</style>
<script>
function extractHostname(url) {
  let hostname
  // find & remove protocol (http, ftp, etc.) and get hostname

  if (url.indexOf('://') > -1) {
    hostname = url.split('/')[2]
  } else {
    hostname = url.split('/')[0]
  }

  // find & remove port number
  hostname = hostname.split(':')[0]
  // find & remove "?"
  hostname = hostname.split('?')[0]

  return hostname
}

// To address those who want the "root domain," use this function:
function extractRootDomain(url) {
  let domain = extractHostname(url)
  const splitArr = domain.split('.')
  const arrLen = splitArr.length

  // extracting the root domain here
  // if there is a subdomain
  if (arrLen > 2) {
    domain = splitArr[arrLen - 2] + '.' + splitArr[arrLen - 1]
    // check to see if it's using a Country Code Top Level Domain (ccTLD) (i.e. ".me.uk")
    if (splitArr[arrLen - 2].length === 2 && splitArr[arrLen - 1].length === 2) {
      // this is using a ccTLD
      domain = splitArr[arrLen - 3] + '.' + domain
    }
  }
  return domain
}

import { Post } from '@/api/eco/search'

const gselecttabs = [
  {
    value: '0', // 一定要从0开始的序号
    label: '平台搜索',
    type: 1,
    items: [
      {
        label: '亚马逊',
        name: 'amazon.com',
        searchurl: 'https://www.amazon.com/s/ref=nb_sb_noss_2?url=search-alias%3Daps&field-keywords='
      },
      {
        label: 'ebay',
        name: 'ebay.com',
        searchurl: 'https://www.ebay.com/sch/i.html?_from=R40&_trksid=m570.l1313&_nkw='
      },
      {
        label: 'etsy',
        name: 'etsy.com',
        searchurl: 'https://www.etsy.com/search?q='
      },
      {
        label: 'aliexpress',
        name: 'aliexpress.com',
        searchurl: 'https://www.aliexpress.com/wholesale?SearchText='
      },
      {
        label: '1688',
        name: '1688.com',
        searchurl: 'https://s.1688.com/selloffer/offer_search.htm?keywords='
      },
      {
        label: 'taobao',
        name: 'taobao.com',
        searchurl: 'https://s.taobao.com/search?q='
      }
    ]
  },
  {
    value: '1',
    label: '问答搜索',
    type: 1,
    items: [
      {
        label: 'quora',
        name: 'quora.com',
        searchurl: 'https://www.quora.com/search?q='
      },
      {
        label: '雅虎answer',
        name: 'answers.search.yahoo.com',
        searchurl: 'https://answers.search.yahoo.com/search?p='
      },
      {
        label: 'reddit',
        name: 'reddit.com',
        searchurl: 'https://www.reddit.com/search?q='
      },
      {
        label: 'stackexchange',
        name: 'stackexchange.com',
        searchurl: 'https://stackexchange.com/search?q='
      },
      {
        label: 'askopinion',
        name: 'askopinion.com',
        searchurl: 'https://askopinion.com/search?q='
      },
      {
        label: 'answers',
        name: 'answers.com',
        searchurl: 'http://www.answers.com/search?q='
      }
    ]
  },
  {
    value: '2',
    type: 1,
    label: '动漫搜索',
    items: [
      {
        label: 'myanimelist',
        name: 'myanimelist.net',
        searchurl: ''
      },

      {
        label: 'animefreak',
        name: 'animefreak.tv',
        searchurl: 'http://www.animefreak.tv/search/node/gate'
      },
      {
        label: 'gogoanime',
        name: 'gogoanime.to',
        searchurl: ' http://www.gogoanime.to/?s='
      },

      {
        label: 'animedakimakurapillow',
        name: 'animedakimakurapillow.com',
        searchurl: 'https://www.animedakimakurapillow.com/search?q='
      },
      {
        label: 'hobbyheart',
        name: 'hobbyheart.com',
        searchurl: 'https://www.moemarket.com/catalogsearch/result/?q='
      },
      {
        label: 'coosfly',
        name: 'coosfly.com',
        searchurl: ''
      }
    ]
  },
  {
    value: '3', // 一定要从0开始的序号
    label: '搜索引擎',
    type: 3,
    items: [
      {
        label: 'google.com',
        name: 'google.com',
        searchurl: 'https://www.google.com/search?newwindow=1&source=hp&q='
      }
    ]
  }
]
export default {
  data() {
    return {
      query: '',
      select: '0',
      searchDatas: [],
      activeName: 'amazon.com',
      tabNames: gselecttabs[0]['items'],
      selecttabs: gselecttabs,
      page: 1,
      currentTab: '',
      localSearch: 'https://www.google.com/search?source=hp&ei=&q=',
      loading: false,
      querystr: '',
      sdomin1: '',
      sdomin2: '',
      dialogVisible: false
    }
  },
  methods: {
    onSubmit() {
      if (!this.query.length) {
        return
      }
      this.loading = true
      this.tabNames.forEach((item, index) => {
        if (item.name === this.activeName) {
          // console.log(item.searchurl);
          this.localSearch = this.tabNames[index].searchurl
        }
      })
      this.localSearch += this.query
      console.log(this.currentTab.type)
      if (this.currentTab.type === 3) {
        this.querystr = this.query
      } else {
        this.querystr = this.query + ' site:' + this.activeName
      }
      Post(JSON.stringify({ query: this.querystr, page: this.page })).then((response) => {
        this.searchDatas = response.data
        this.loading = false
      })
      console.log('submit!')
    },
    GetNextPage() {
      this.page = this.page + 1
      this.onSubmit()
    },
    GetPrevPage() {
      this.page = this.page - 1
      if (this.page <= 0) {
        this.page = 1
      }
      this.onSubmit()
    },
    handleClick(tab, event) {
      this.tabNames.forEach((item, index) => {
        if (item.name === this.activeName) {
          // console.log(item.searchurl);
          this.localSearch = this.tabNames[index].searchurl
        }
      })
      this.onSubmit()
      console.log(tab, event)
    },
    handleChange(s, event) {
      console.log(parseInt(s))
      this.tabNames = this.selecttabs[parseInt(s)]['items']
      this.currentTab = this.selecttabs[parseInt(s)]
      this.activeName = this.tabNames[0].name
      this.localSearch = this.tabNames[0].searchurl
      this.onSubmit()
    },
    ShowSimilarweb(url) {
      this.dialogVisible = true
      const domain = extractRootDomain(url)
      console.log(domain)
      this.sdomin1 = '//widget.similarweb.com/traffic/' + domain
      this.sdomin2 = '//widget.similarweb.com/sources/' + domain
    }
  }
}

</script>
